<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-08-28 15:20:43
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-09-24 19:28:05
 * @FilePath: \aqscpx_admin\src\pages\park\bank-management\components\sheet.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 表格组件 -->
<script lang="tsx" setup>
import { toRaw } from "vue";

import type { TableColumnOption } from "@/components/table-widget/table-widget.vue";
import TableWidget from "@/components/table-widget/table-widget.vue";
import { jeecgBootExQuebankDeleteUsingGet } from "@/genapi/exam";

import { injectState } from "../state";
// import testData from "./assets   /testData.json";

defineOptions({ name: "Sheet" });

const {
	selectedList,
	tableRef,
	detailDialogRef,
	page: { records, isLoading, execute },
} = injectState()!;

watch(records, () => tableRef.value?.table?.clearSelection());
// 测试数据
// records.value = testData;

const onAudit = async (row: (typeof records.value)[0]) => {
	await ElMessageBox.confirm(`确认删除吗？`, {
		type: "info",
		title: "提示",
	});
	await jeecgBootExQuebankDeleteUsingGet({
		params: {
			id: row.id!,
		},
	});
	ElMessage.success("处理成功");
	await execute();
};

const columns: TableColumnOption<(typeof records.value)[0]>[] = [
	{
		label: "序号",
		type: "index",
		width: "80",
	},
	{
		label: "题库ID",
		width: "150",
		formatter: (row) => row.id ?? "-",
	},
	{
		label: "题库名称",
		width: "120",
		formatter: (row) => row.name ?? "-",
	},
	{
		label: "题库类型",
		width: "100",
		formatter: (row) => row.categoryText ?? "-",
	},
	{
		label: "标签",
		width: "270",
		formatter: (row) => {
			return row.tags?.map((item) => {
				return (
					<el-tag size="mini" type="success">
						{item}
					</el-tag>
				);
			});
		},
	},
	{
		label: "单选题数量",
		width: "100",
		formatter: (row) => row.scCount ?? "-",
	},
	{
		label: "多选题数量",
		width: "100",
		formatter: (row) => row.mcCount ?? "-",
	},
	{
		label: "判断题数量",
		width: "100",
		formatter: (row) => row.yonCount ?? "-",
	},
	{
		label: "创建时间",
		width: "200",
		formatter: (row) => row.createTime ?? "-",
	},
	{
		label: "创建人",
		width: "100",
		formatter: (row) => row.createBy ?? "-",
	},
	{
		label: "操作",
		export: false,
		fixed: "right",
		noExport: true,
		formatter(row) {
			return (
				<>
					<el-button
						size="small"
						type="primary"
						text
						onClick={() => detailDialogRef.value?.trigger("write", row)}
					>
						编辑
					</el-button>
					<el-button
						size="small"
						type="primary"
						text
						onClick={() => onAudit(row)}
					>
						删除
					</el-button>
				</>
			);
		},
	},
];
</script>

<template>
	<TableWidget
		fit
		ref="tableRef"
		v-loading="isLoading"
		:data="records"
		:columns="columns"
		h="100%!"
		@selection-change="(rows: any) => (selectedList = toRaw(rows))"
	/>
</template>
<style scoped lang="scss">
.el-table td.el-table__cell div {
	display: flex;
	justify-content: center !important;
}
</style>
